@use '../core' as *;

.docsHeaderIcon {
    position: relative;
    padding-left: 0;
    margin-left: $spacing-size-2;
    font-size: inherit;
    opacity: 0;
    transition: opacity 0.33s ease-in-out;

    svg {
        position: relative;
        top: -0.1em;
        width: 0.85em;
        height: 0.85em;
        visibility: visible;
        fill: var(--color-link);
    }

    &:hover {
        opacity: 1;
    }
}

// Half highlight icon if hovering over container heading element
h1,
h2,
h3,
h4,
h5,
h6 {
    &:hover .docsHeaderIcon {
        opacity: 0.5;

        &:hover {
            opacity: 1;
        }
    }
}
